<template>
    <div class="admin-top">
        <div class="admin-top-sousou">
            <span>
                <el-icon>
                    <Search />
                </el-icon>
                筛选搜索
            </span>
            <div>
                <el-button>重置</el-button>
                <el-button type="primary" @click="onSearch">查询搜索</el-button>
            </div>
        </div>
        <div class="admin-bom">
            <span>
                账号/姓名:
            </span>
            <el-input type="text" placeholder="请输入用户名" v-model="name"></el-input>
        </div>

    </div>

    <div class="admim-nav">
        <div>
            <el-icon>
                <Tickets />
            </el-icon>
            <span>
                数据列表
            </span>
        </div>
        <div>
            <el-button type="primary" @click="addmenu()">添加</el-button>
        </div>
    </div>
    <div class="admin-foter">
        <el-table :data="tableData" style="width: 100%;" border>
            <el-table-column type="selection" width="50" />
            <el-table-column prop="id" label="编号" width="100" />
            <el-table-column prop="name" label="品牌名称" width="200" />
            <el-table-column prop="firstLetter" label="品牌首字母" width="100" />
            <el-table-column prop="sort" label="排序" width="100"></el-table-column>
            <el-table-column label="品牌制造商" width="100">
                <template #default="scope">
                    <el-switch :value="scope.row.factoryStatus === 1 ? true : false" />
                </template>
            </el-table-column>>
            <el-table-column label="是否显示" width="100">
                <template #default="scope">
                    <el-switch :value="scope.row.showStatus === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column prop="address" label="相关">
                商品:100 评价:100
            </el-table-column>
            <el-table-column prop="address" label="操作">
                <template #default="scope">
                    <el-button @click="addmenu(scope.row.id)">编辑</el-button>
                    <el-button type="danger" @click="address(scope.row.id)">删除</el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize"
            :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
</template>

<script setup lang="ts">
import { Search, Tickets } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import * as api from '../../request/api'
import dayjs from 'dayjs'
import useTable from '../../hooks/useTables'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter, useRoute, RouterView } from 'vue-router';
const router = useRouter()
let name = ref("")
const visible = ref(false)
const change = ref('a')
//分配提示
const getValuefn = (e: any) => {
    // console.log(e)
    visible.value = e
}
//添加
const address = (id: Number) => {
    // 二次 确认 
    ElMessageBox.confirm(
        '是否提交数据', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求删除
            await api.product.getremoveBrand(id)
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            router.push('/pms/brand')
            getTableData()
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//编辑
const addmenu = (id?: string) => {
    console.log(id);
    router.push({
        path: '/Pms/updateBrand',
        query: { id }

    });

}
//数据请求展示
let { tableData, getTableData, pagination } = useTable(api.product.getBrandManagement, {
    // keyword: name.value  // 可以删掉 name.value 不是一个响应式数据
    keyword: name // name 是响应式的
})
//分页
getTableData()
const handleSizeChange = (val: number) => {
    getTableData()
    // console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    getTableData()
    // console.log(`current page: ${val}`)
}

let onSearch = async () => {
    getTableData()
}
</script>

<style lang="scss" scoped>
.admin-top {
    width: 96%;
    height: 90px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    margin-top: 60px;
    margin-bottom: 20px;

    .admin-top-sousou {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        span {
            .el-icon {
                padding-right: 10px;
            }
        }

        .el-button {
            margin-left: 20px;
        }

    }

}

.admin-bom {
    padding-left: 50px;

    .el-input {
        width: 200px;
    }
}

.admim-nav {
    width: 96%;
    height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .example-pagination-block {
        margin-top: 10px;
        float: right;
    }

}

.admin-foter {
    margin-top: 20px;
}
</style>